<template>
	<view class="page-content bg_fff"
		style="padding-bottom: 100rpx;background-color: #fff;overflow-x: hidden;padding-bottom: 320rpx;">
		<view class="topBg mb-20">
			<u-navbar title="级别升级" @rightClick="rightClick" :autoBack="true" bgColor="#fff" leftIconColor="#000"
				titleStyle="color:#333" :placeholder="true">
			</u-navbar>
			<view class="pd-20 display_row_btn_center" style="padding-right: 0;width: 100%;" v-if="user.headimg">
				<u-image :src="user.headimg" width="100rpx" height="100rpx" shape="circle"></u-image>
				<view class="itemBase f_28">
					<view class="display_row_btn_center"><text class="c_333333 title">{{user.username}}</text>
						<view class="bgVip">
							<view class="ml-10">
								<u-image
									src="https://dtkj-qnyimg.diankuai.com/%E7%BA%A7%E5%88%AB%E5%8D%87%E7%BA%A7/AgAACt9b6bH6SXLWGW9HV7MiOGeHbJG0.png"
									width="150rpx" height="42rpx" mode="widthFix">
								</u-image>
							</view>
							<text class="c_C62B2C f_20 vipText">{{user.vip_name}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="incomeBox">
				<view class="incomeInfoBox">
					<view class="display_row_center infoTitle" style="background-color: #E1E1E1;">
						<text class="c_333333">我的</text>
						<u-line direction="col" color="#999999" length="70%"></u-line>
						<text class="c_333333">团队({{incomeOther.group_number}}人)</text>
					</view>
					<view class="display_row_center incomeInfo">
						<view class="display_row_center">
							<view>
								<text class="c_333333 f_34">{{incomeOther.mine_order}}</text>
								<text class="mt-10 c_999999 f-24">订单数</text>
							</view>
							<view>
								<text class="c_333333 f_34">￥{{income.totle.mine}}</text>
								<text class="mt-10 c_999999 f-24">订单金额</text>
							</view>
						</view>
						<view
							style="background-color: #999;height: 80rpx;width: 1px;flex: 0;min-width: 1px">
						</view>
						<view class="display_row_center">
							<view>
								<text class="c_333333 f_34">{{incomeOther.group_order}}</text>
								<text class="mt-10 c_999999 f-24">订单数</text>
							</view>
							<view>
								<text class="c_333333 f_34">￥{{incomeOther.group_order_amount}}</text>
								<text class="mt-10 c_999999 f-24">订单金额</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-tabs :list="list4" lineWidth="20" lineHeight="7" lineBgSize="100% 100%" lineRadius="0px"
			:lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
		        color: '#C62B2C',
		        fontWeight: 'bold',
		        transform: 'scale(1.2)'
		    }" :inactiveStyle="{
		        color: '#999999',
		        transform: 'scale(1.1)'
		    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="typeClick">
		</u-tabs>

		<view class="incomeBox1" v-if="crtTab.number==0">
			<view class="incomeBox2" style="background-color: rgb(85, 106, 234);">
				<view class="c_ffffff display_row_btn_center" style="min-height: 80rpx;">
					<view class="display_row_btn_center pl-20">
						<text class="ml-10" style="font-size: 24rpx;">{{user.vip_code==0?'当前级别':'级别名称'}}</text>
					</view>
				</view>
				<view
					style="flex:4;background:url('https://dtkj-qnyimg.diankuai.com/%E7%99%BD%E9%93%B6%E4%BC%9A%E5%91%98%20%E6%8B%B7%E8%B4%9D%208.png') no-repeat center center;padding: 40rpx;"
					class="incomeInfo pd-20">
					<text class="f_36 c_ffffff" style="font-weight: bold;">{{crtTab.name}}</text>
				</view>
			</view>
		</view>

		<view class="incomeBox1" v-if="crtTab.number==1">
			<view class="incomeBox2" style="background-color: rgb(197, 43, 44);">
				<view class="c_ffffff display_row_btn_center" style="min-height: 80rpx;">
					<view class="display_row_btn_center pl-20">
						<text class="ml-10" style="font-size: 24rpx;">{{user.vip_code==1?'当前级别':'级别名称'}}</text>
					</view>
				</view>
				<view
					style="flex:4;background:url('https://dtkj-qnyimg.diankuai.com/%E7%99%BD%E9%93%B6%E4%BC%9A%E5%91%98%20%E6%8B%B7%E8%B4%9D%206.png') no-repeat center center;padding: 40rpx;"
					class="incomeInfo pd-20">
					<text class="f_36 c_ffffff" style="font-weight: bold;">{{crtTab.name}}</text>
				</view>
			</view>
		</view>

		<view class="incomeBox1" v-if="crtTab.number==2">
			<view class="incomeBox2" style="background-color: rgb(24, 37, 90);">
				<view class="c_ffffff display_row_btn_center" style="min-height: 80rpx;">
					<view class="display_row_btn_center pl-20">
						<text class="ml-10" style="font-size: 24rpx;">{{user.vip_code==2?'当前级别':'级别名称'}}</text>
					</view>
				</view>
				<view
					style="flex:4;background:url('https://dtkj-qnyimg.diankuai.com/%E7%99%BD%E9%93%B6%E4%BC%9A%E5%91%98%20%E6%8B%B7%E8%B4%9D%207.png') no-repeat center center;padding: 40rpx;"
					class="incomeInfo pd-20">
					<text class="f_36 c_ffffff" style="font-weight: bold;">{{crtTab.name}}</text>
				</view>
			</view>
		</view>

		<view class="subTitle mt-20">
			<u-image
				src="https://dtkj-qnyimg.diankuai.com/%E7%BA%A7%E5%88%AB%E5%8D%87%E7%BA%A7/%E4%BC%9A%E5%91%98%E6%9D%83%E7%9B%8A.png"
				width="40rpx" height="40rpx"></u-image>
			<text class="c_333333 f_30" style="font-weight: bold;">特别权益</text>
		</view>
		<view class="incomeBox">
			<view class="incomeBoxBg">
				<view class="incomeInfoBox" style="border-bottom-left-radius: 0;border-bottom-right-radius: 0;">
					<view class="display_row_center infoTitle">
						<text class="c_333333">项目</text>
						<text class="c_333333">订单单价</text>
						<text class="c_333333">团队佣金</text>
					</view>
				</view>
				<block v-for="(item, index) in crtTab.commission_text" :key="index">
					<view class="display_row_center infoTitle">
						<text class="c_333333">{{item.name}}</text>
						<text class="c_333333">￥{{item.commission}}</text>
						<text class="c_333333">{{item.commission_next}}%</text>
					</view>
				</block>
			</view>
		</view>

		<template v-if="crtTab.teams_direct_status==1||crtTab.order_amount_status==1">
			<view class="subTitle mt-20">
				<text class="c_333333 f_30" style="font-weight: bold;">升级当前级别的条件</text>
			</view>

			<view class="incomeBox">
				<view class="incomeBoxBg">
					<view v-if="crtTab.teams_direct_status==1" class="display_row_center upitem">
						<u-image
							src="https://dtkj-qnyimg.diankuai.com/%E7%BA%A7%E5%88%AB%E5%8D%87%E7%BA%A7/%E5%AE%9E%E6%99%AF%E9%85%B7-%E4%BA%BA%E6%95%B0.png"
							width="80rpx" height="80rpx"></u-image>
						<view class="ml-10">
							<text class="c_333333 f_34">我邀请的团队人数达到{{crtTab.teams_direct_number}}人</text>
							<text class="c_999999 f_26">邀请的团队人数必须达到{{crtTab.teams_direct_number}}人以上</text>
						</view>
					</view>
					<view v-if="crtTab.order_amount_status==1" class="display_row_center upitem">
						<u-image
							src="https://dtkj-qnyimg.diankuai.com/%E7%BA%A7%E5%88%AB%E5%8D%87%E7%BA%A7/dkw_%E9%87%91%E9%A2%9D.png"
							width="80rpx" height="80rpx"></u-image>
						<view class="ml-10">
							<text class="c_333333 f_34">我的订单金额达到￥{{crtTab.order_amount_number}}元</text>
							<text class="c_999999 f_26">我的订单当月金额必须达到{{crtTab.order_amount_number}}元以上</text>
						</view>
					</view>
				</view>
			</view>
		</template>

		<template v-if="crtTab.number!=0">
			<view class="btmBox c_ffffff" @click="checkUpdate" v-if="user.vip_code+1==crtTab.number">
				申请开通级别
			</view>
			<view class="btmBox c_ffffff" v-else style="background: none;background-color: #999;">
				申请开通级别
			</view>
		</template>
	</view>
</template>

<script>
	import {
		getUpgrade,
		upgradeUser,
		getOrderCollect,
		getOtherOrderCollect
	} from '@/config/api.js'

	export default {
		data() {
			return {
				user: uni.getStorageSync('UserInfo', null),
				lineBg: "https://dtkj-qnyimg.diankuai.com/%E7%BA%A7%E5%88%AB%E5%8D%87%E7%BA%A7/%E5%BD%A2%E7%8A%B6%201.png",
				list4: [],
				crtTab: {},
				income: null,
				incomeOther: null,
			}
		},
		onLoad() {
			this.getUpgrades()
			this.getCollect()
		},
		methods: {
			checkUpdate() {
				upgradeUser().then(res => {
					uni.showToast({
						title: "升级成功！",
						duration: 2000,
						icon: 'success'
					})
				}).catch(err => {
					uni.showToast({
						title: err.info,
						duration: 2000,
						icon: 'none'
					})
				})
			},
			typeClick(e) {
				this.crtTab = e;
			},
			getUpgrades() {
				getUpgrade().then(res => {
					this.list4 = res;
					this.crtTab = res[0];
				})
			},
			getCollect() {
				getOrderCollect().then(res => {
					this.income = res
				})

				getOtherOrderCollect().then(res => {
					this.incomeOther = res
				})
			}
		}
	}
</script>

<style scoped>
	.topBg {
		/* background-image: url('https://dtkj-qnyimg.diankuai.com/%E9%82%80%E8%AF%B7%E9%A1%B5%E9%9D%A2/%E5%9B%BE%E5%B1%82%201.png');
		background-size: 100%;
		background-repeat: no-repeat; */
		width: 100%;
		height: 530rpx;
	}

	.itemBaseBox {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex: 6;
	}

	.itemBase {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		margin-left: 20rpx;
		flex: 2;
	}

	.bgVip {
		position: relative;
	}

	.vipText {
		position: absolute;
		top: 3px;
		left: 70rpx;
	}

	.share-view {
		height: 64rpx;
		position: relative;
	}

	.logo1 {
		width: 60rpx;
		height: 60rpx;
	}

	.share-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 140rpx;
		padding: 0rpx 10rpx 0rpx 0rpx;
		position: absolute;
		right: 0;
		background-color: #fff;
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		background-color: #C62B2C;
	}

	.share-box>text {
		font-family: PingFang SC;
		font-weight: bold;
		color: #fff;
	}

	.incomeBox {
		margin: 20rpx 0;
		padding: 0 20rpx;
	}

	.incomeInfoBox {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: rgba(225, 225, 225, 0.3);
	}

	.incomeInfoBox>view {
		width: 100%;
	}

	.infoTitle {
		height: 80rpx;
	}

	.infoTitle>text {
		flex: 1;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
	}

	.incomeInfo {
		width: 100%;
	}

	.incomeInfo>view,
	.incomeInfo>view>view {
		flex: 1;

	}

	.incomeInfo>view>view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}

	.incomeInfo>view>view>text:first-child {
		font-weight: 800;
	}

	.subTitle {
		display: flex;
		flex-direction: row;
		padding-left: 20rpx;
	}

	.incomeBoxBg {
		border: 1px solid #999999;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.upitem {
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.upitem:last-child {
		margin-bottom: 20rpx;
	}

	.upitem>view:last-child {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		height: 80rpx;
		flex: 1;
		padding-bottom: 10rpx;
		border-bottom: 1px solid #999999;
	}

	.upitem:last-child>view:last-child {
		border-bottom: none;
	}

	.incomeBox1 {
		width: 100%;
		box-sizing: border-box;
		padding: 0rpx 20rpx;
		min-height: 320rpx;
		margin-top: 20rpx;
	}

	.incomeBox2 {
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.incomeInfo {
		background-size: 100% 100%;
	}
</style>
